<!DOCTYPE html>
<html lang="en">
	<head>
	  <meta charset="utf-8">
	  <title>手机端</title>
	  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
	<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
	<script>
			var timestamp = parseInt(Date.parse(new Date())/10000);
			document.write('<link rel="stylesheet" href="css/style.css?v='+timestamp+'"/>');
	</script>
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
	<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
	<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
	<!-- <script src="js/qrcode.min.js"></script> -->
	<!-- 个人文件 -->
	<link rel="stylesheet" href="css/config.css">
	<link rel="stylesheet" type="text/css" href="css/zhy.animate.css"/>

<!-- <script src="//cdn.jsdelivr.net/npm/eruda"></script> <script >eruda.init();</script> -->
	<style>
	#container {
		width: 100%;
		height: 100%;
		}
	.phone_bg {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 1);
	}
	.img_content {
		width: 7rem;
		height: 3.86rem;
		top: 25%;
		left: calc(50% - 3.5rem);
		z-index: 999;
	}
	.canvas_content {
		width: 7rem;
		height: 3.86rem;
		top: 0%;
		left: calc(50% - 3.5rem);
		opacity: 0;
		pointer-events: none;
	}
	#myCanvas{
		position: absolute;
		left: 200%;
	}
	.canvas_div {
		width: 7rem;
		height: 3.86rem;
		top: 25%;
		left: 0;
	}
	.save_btn {
		width: 2rem;
		height: 0.6rem;
		border-radius: 0.2rem;
		background-color: brown;
		color: #fff;
		font-size: 0.24rem;
		text-align: center;
		line-height: 0.6rem;
		top: 70%;
		left: calc(50% - 1rem);

	}
	
	</style>
	</head>
	<body>
		<div class="main pos-ab">
			<div class="phone_bg pos-ab">
				<div class="canvas_content pos-ab">
					<div class="canvas_div pos-ab" id="myDiv">
						<canvas id="myCanvas"></canvas>
					</div>
				</div>
				<div class="img_content pos-ab">
					<img src="" alt="" class="img_content_src" id="img_content_src_">
				</div>
				<span class="save_btn pos-ab none">长按保存成绩</span>

				
			</div>
			<!-- <img src="" id="img13" alt="" srcset=""> -->
			
			
		</div>
		<source src="js/jquery-1.11.3.min.js"></script> 
		<script src="js/swiper.animate.min.js" ></script>
		<script src="js/swiper.min.js"></script>
		<script src="js/picker.min.js?v=2.21"></script>
		<script src="js/preloadjs-0.6.1.min.js"></script>
		<script src="js/wx_author.js"></script> 
		<script>
			document.write('<script src="js/bgmusic.js?v='+timestamp+'"><\/script>');
			document.write('<script src="js/app.js?v='+timestamp+'"><\/script>');
			document.write('<script src="js/loading.js?v='+timestamp+'"><\/script>');
		</script>
		<script>
			// var _bgmusic=new bgmusic({});
			var v = getQueryVariable('mid');
			console.log(v,"1111");
			var jiang_img = 0;
			// setTimeout(() => {
				//测试
			// 					draw(1)
			// 				}, 500);


			is_jiang_get()
			function is_jiang_get(){
				$.ajax({url : 'http://wx.whyimingkeji.com/zcivcase/index.php?form-form_chaxundati',
					data: {suijishu:v},
					dataType:'json',
					type:'post',
					success:function(res){
						console.log(res)
						if(res.return_code == "success"){
							let jisng_num = res.return_data.num;
							
							if(jisng_num > 0 && jisng_num < 11){
								jiang_img = 3
							}
							else if(jisng_num > 10 && jisng_num < 21){
								jiang_img = 2
							}
							else if(jisng_num > 20 && jisng_num < 26){
								jiang_img = 1
							}
							setTimeout(() => {
								draw(jiang_img)
							}, 500);
						}else{
							alert(res.return_msg)
						}
					}  
				});
			}
			var canvas = document.getElementById('myCanvas');
			var ctx = canvas.getContext('2d');
			// 获取div的宽高
			var div = document.getElementById('myDiv');
			var width = div.offsetWidth;
			var height = div.offsetHeight;
			// 设置canvas的宽高
			canvas.width = width * 2;
			canvas.height = height* 2;
			console.log(width,height,"1111");
			// 如果你想要canvas的样式也和div一致，可以这样设置
			canvas.style.width = width + 'px';
			canvas.style.height = height + 'px';
			function draw(jiang_img){
				var img = new Image();
				if(jiang_img == 1){
					img.src = "img/phone_jiang1.png?v="+timestamp; // 替换为你的图片URL
				}
				else if(jiang_img == 2){
					img.src = "img/phone_jiang3.png?v="+timestamp; 
				}
				else if(jiang_img == 3){
					img.src = "img/phone_jiang2.png?v="+timestamp; 
				}
				img.onload = function() {
					// 绘制图片
					ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
					
					// 设置文本样式
					ctx.font = '18px Arial';
					ctx.fillStyle = '#000';
					ctx.textAlign = 'center';
					ctx.textBaseline = 'top';
					

					// 绘制日期  获取当前日期
					const date = new Date();
					// console.log(dateToChinese(date));
					// ctx.fillText(dateToChinese(date), canvas.width / 2 , canvas.height / 2);
					ctx.fillTextVertical(dateToChinese(date), canvas.width / 7.5, canvas.height / 2.5);
					
					// 将canvas转换为图片
					var dataURL = canvas.toDataURL('image/png');
					var imageElement = document.createElement('img');
					imageElement.src = dataURL;
					$("#img_content_src_").attr("src",dataURL)
					document.body.appendChild(imageElement);
					
				};
				$(".save_btn").show()
			}
			
			
			CanvasRenderingContext2D.prototype.fillTextVertical = function (text, x, y) {
				var context = this;
				var canvas = context.canvas;
				
				var arrText = text.split('');
				var arrWidth = arrText.map(function (letter) {
					return context.measureText(letter).width;
				});
				
				var align = context.textAlign;
				var baseline = context.textBaseline;
				
				if (align == 'left') {
					x = x + Math.max.apply(null, arrWidth) / 2;
				} else if (align == 'right') {
					x = x - Math.max.apply(null, arrWidth) / 2;
				}
				if (baseline == 'bottom' || baseline == 'alphabetic' || baseline == 'ideographic') {
					y = y - arrWidth[0] / 2;
				} else if (baseline == 'top' || baseline == 'hanging') {
					y = y + arrWidth[0] / 2;
				}
				
				context.textAlign = 'center';
				context.textBaseline = 'middle';
				
				// 开始逐字绘制
				arrText.forEach(function (letter, index) {
					// 确定下一个字符的纵坐标位置
					var letterWidth = arrWidth[index];
					// 是否需要旋转判断
					var code = letter.charCodeAt(0);
					if (code <= 256) {
						context.translate(x, y);
						// 英文字符，旋转90°
						context.rotate(90 * Math.PI / 180);
						context.translate(-x, -y);
					} else if (index > 0 && text.charCodeAt(index - 1) < 256) {
						// offset fix
						y = y + arrWidth[index - 1] / 2;
					}
					context.fillText(letter, x, y);
					// 旋转坐标系还原成初始态
					context.setTransform(1, 0, 0, 1, 0, 0);
					// 确定下一个字符的纵坐标位置
					var letterWidth = arrWidth[index];
					y = y + letterWidth;
				});
				// 水平垂直对齐方式还原
				context.textAlign = align;
				context.textBaseline = baseline;
			};
 
 
			function base64ToBlob(urlData, type) {
				let arr = urlData.split(',');
				let mime = arr[0].match(/:(.*?);/)[1] || type;
				// 去掉url的头，并转化为byte
				let bytes = window.atob(arr[1]);
				// 处理异常,将ascii码小于0的转换为大于0
				let ab = new ArrayBuffer(bytes.length);
				// 生成视图（直接针对内存）：8位无符号整数，长度1个字节
				let ia = new Uint8Array(ab);
				for (let i = 0; i < bytes.length; i++) {
					ia[i] = bytes.charCodeAt(i);
				}
				return new Blob([ab], {
					type: mime
				});
			}

			// 日期转大写
			function dateToChinese(date) {
				const chineseNums = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
				let year = date.getFullYear().toString();
				let month = (date.getMonth() + 1).toString();
				let day = date.getDate().toString();
				let chineseDate = year.replace(/\d/g, (match) => {
				return chineseNums[Number(match)];
				});
				chineseDate += '年';
				chineseDate += month.replace(/\d/g, (match) => {
				return chineseNums[Number(match)];
				});
				chineseDate += '月';
				chineseDate += day.replace(/\d/g, (match) => {
				return chineseNums[Number(match)];
				});
				chineseDate += '日';
				return chineseDate;
			}
				
		</script>
	</body>
</html>
